<template>
	<view class="container">
		<uni-nav-bar title="随货入库" fixed statusBar :border="false" height="88rpx" left-icon="left" @clickLeft="onClickLeft"></uni-nav-bar>
		<view class="search">
			<view class="input">
				<uni-easyinput trim="all" v-model="followNumber" placeholder="请输入随货单号或调拨单号" clearable></uni-easyinput>
			</view>
			<view class="btn type-1" @click="toSearch">查询</view>
			<uni-icons class="icon-scan" type="scan" size="28" color="#2979ff" @click="scanCode"></uni-icons>
		</view>
		<scroll-view :style="{height:`calc(100vh - 168rpx - ${statusBarHeight}px)`}" style="overflow: hidden;" scroll-y enhanced :show-scrollbar="false"
			:scroll-with-animation="true" refresher-enabled @refresherrefresh="pulldownRefresh" :refresher-triggered="refreshStatus" @touchmove.stop
			@scrolltolower="scrolltolower">
			<view class="list" v-if="goodsList.length > 0">
				<view class="item" v-for="(item,index) in goodsList" :key="item.id">
					<view class="line">
						<!-- 入库编号：{{ item.number }} -->
						<view class="line_left" style="width: 60%;">
							{{ item.number }}
						</view>
						<view class="line_right" style="width: 40%;">
							{{ item.type == '1' ? '调拨入库':'随货入库' }}
						</view>
					</view>
					<view class="line">
						<view class="line_left" style="width: 60%;">
							{{ item.type == '1' ? '调拨编号：':'随货编号：' }}{{ item.followNumber }}
						</view>
						<view class="line_right" style="width: 40%;">
							随货数量：{{ item.followCount }}
						</view>
					</view>
					<view class="line">
						<view class="line_left">
							{{ item.type == '1' ? '调拨门店：':'发货仓库：' }}{{ item.warehouseName }}
						</view>
						<view class="line_right">
							随货总额：{{ item.commodityAmount }} 元
						</view>
					</view>
					<view class="line">
						<view class="line_left" style="width: 60%;">
							入库时间：{{ item.inboundTime | parseTime }}
						</view>
						<view class="line_right" style="width: 40%;">
							<view class="btn type-1" @click.stop="toDetail(item)">详情</view>
							<view class="btn type-1" @click.stop="()=>{$navTo('./shBack',{inboundNumber:item.number});newPage = 'edit'}">点退</view>
						</view>
					</view>
				</view>
				<uni-load-more :status="loading" v-if="goodsList.length > 0"></uni-load-more>
			</view>
			<view style="width: 100%;height: 100%;background-color: #f7f7f7;display: flex;justify-content: center;align-items: center;"
				v-if="goodsList.length == 0">
				<image src="/static/index/nonedata.png" mode="aspectFill" style="width: 400rpx;height: 400rpx;"></image>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { reqInwarehouseRec, reqFollowInfo,reqDbdInwarehouseList } from '@/apis/goods.js'
	export default {
		name: "ShInWarehouse",
		data() {
			return {
				followNumber: '',
				goodsList: [],
				refreshStatus: false,
				loading: 'loading',
				page: {
					pageNum: 1,
					pageSize: 15,
					total: 0
				},
				newPage: 'detail'
			}
		},
		onLoad() {
			this.getOrderList();
		},
		onShow() {
			if (this.newPage == 'edit' || this.newPage == 'add') {
				this.goodsList = [];
				this.loading = 'loading';
				this.page = {
					pageNum: 1,
					pageSize: 15
				}
				this.getOrderList()
			}
			this.newPage = 'detail'
		},
		methods: {
			pulldownRefresh() {
				this.loading = 'loading';
				this.refreshStatus = true;
				this.page = {
					pageNum: 1,
					pageSize: 15,
					total: 0
				}
				this.goodsList = [];
				this.getOrderList();
			},
			scrolltolower() {
				console.log('触底');
				if (this.loading == "noMore") {
					return;
				}
				this.page.pageNum++;
				this.loading = "loading";
				this.getOrderList();
			},
			async getOrderList() {
				let { page: { pageNum, pageSize } } = this;
				let res = await reqInwarehouseRec({ pageNum, pageSize });
				if (res.code === 200) {
					const data = res.data;
					let arr = [...this.goodsList, ...data.list];
					const map = new Map();
					const newArr = arr.filter(v => !map.has(v.id) && map.set(v.id, v));
					this.goodsList = newArr;
					if (res.data.isLastPage) {
						this.loading = "noMore";
					}
					this.refreshStatus = false;
				}
			},
			scanCode() {
				// #ifdef APP
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['barCode', 'qrCode'],
					autoDecodeCharset: true,
					hideAlbum: true,
					success: (res) => {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						// uni.utils.toast('条码内容：' + res.result)
						this.followNumber = res.result;
						// if (!this.followNumber.startsWith("SHD") || this.followNumber.length != 15) {
						// 	uni.utils.toast('扫描内容不完整,检查是否有误');
						// }
					},
					fail: (error) => {
						console.log(error, 'error');
					},
					complete: (com) => {
						console.log(com, 'com');
					}
				})
				// #endif
				// #ifdef H5
				uni.utils.toast('暂不支持扫码，请安装app');
				// #endif
			},
			async toSearch() {
				if(this.followNumber.startsWith('SHD')){
					let res = await reqFollowInfo({ followNumber: this.followNumber });
					if (res.code === 200) {
						this.$navTo('./shDetail', { followNumber: this.followNumber, status: 'add' });
						this.newPage = 'add';
					}
				}else if(this.followNumber.startsWith('DBD')){
					let res = await reqDbdInwarehouseList({ allocationNumber: this.followNumber });
					if (res.code === 200) {
						console.log(res.data);
						this.$navTo('./shDbDetail', { allocationNumber: this.followNumber, status: 'add' });
						this.newPage = 'add';
					}
				}else {
					uni.utils.toast('随货单或调拨单编号有误');
				}
			},
			toDetail(item) {
				// 调拨详情和随货详情去的是一个页面  因为调拨详情单和随货入库详情单 用的字段键没有换
				this.$navTo('./shDetail',{followNumber:item.id,status:'detail'})
				this.newPage = 'detail';
			}
		},
	}
</script>

<style>
	page {
		background: #f7f7f7;
	}
</style>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top));
		/* #endif */
	}

	.search {
		height: 80rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		background-color: #fff;

		.input {
			width: 60%;

			/deep/ .uni-easyinput__content-input {
				height: 50rpx !important;
				line-height: 50rpx !important;
			}
		}

		.icon-scan {
			margin-left: auto;
		}

		.btn {
			width: 90rpx;
			height: 50rpx;
			margin-left: 20rpx;
			line-height: 50rpx;
			text-align: center;
			border-radius: 5rpx;
		}
	}

	.list {
		padding: 20rpx 20rpx;
		padding-bottom: 0;

		.item {
			padding: 20rpx 24rpx;
			background-color: #fff;
			border-radius: 8rpx;
			margin-bottom: 20rpx;

			&:nth-last-child(2) {
				margin-bottom: 0;
			}

			.line {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: $uni-font-size-small;
				color: #333;
				margin-bottom: 20rpx;

				.line_left,
				.line_right {
					width: 50%;
				}

				.line_right {
					width: 50%;
					text-align: right;
					justify-content: flex-end;
					display: flex;

					.btn {
						width: 120rpx;
						font-size: $uni-font-size-small;
						text-align: center;
						border-radius: 5rpx;
						height: 60rpx;
						box-sizing: border-box;
						line-height: 60rpx;
						margin-right: 30rpx;

						&:last-child {
							margin-right: 0;
						}
					}
				}
			}
		}
	}
</style>